<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../components/echarts-4.0.4.min.js"></script>
		<style>
			html,body{
				width: 100%;
				height: 100%;
			}
			*{
				margin: 0;
				padding: 0;
			}
		</style>
	</head>
	<body>
    <div id="main" style="height:100%;width:100%;"></div>
		
	</body>
	<script>
        var myChart = echarts.init(document.getElementById('main'));
        var data = [
            {value:14, name:'A类人才'},
            {value:12, name:'B类人才'},
            {value:15, name:'C类人才'},
            {value:25, name:'D类人才'},
            {value:20, name:'E类人才'}
        ];
		option = {
		    title: {  
                text: '2017年全国区域专家、高技术人才分布情况',
                x: 'center',
                y:'20%',
                textStyle:{color:'#FFF',fontSize: 22}
           },
		    tooltip : {
		        trigger: 'item',
		        formatter: "{a} <br/>{b} : {c} ({d}%)"
		    },
		    grid: {
		        containLabel: true
		    },
		    color: ['#336c9c','#8ce8e7','#62cff1','#17d4ee','#4fac88','#59c293','#67c47b'],
		    legend: {
		        x : '5%',
		        y : '35%',
		        orient:'vertical',
		        data:['A类人才','B类人才','C类人才','D类人才','E类人才'],
		        textStyle:{color:'#FFF',fontSize: 16}
		    },
            backgroundColor: '#0A0F23',
		    series : [
		        {
		            name:'面积模式',
		            type:'pie',
		            radius: "80",
		            center:['55%','60%'],
		            roseType : 'area',
		            label:{color:'#FFF',fontSize: 16},
		            data:data
		        }
		    ]
		};
		myChart.setOption(option);

        var currentIndex = -1;
        var timer1 = setInterval(function () {
            var dataLen = option.series[0].data.length;
            // 取消之前高亮的图形
            myChart.dispatchAction({
                type: 'downplay',
                seriesIndex: 0,
                dataIndex: currentIndex
            });
            currentIndex = (currentIndex + 1) % dataLen;
            // 高亮当前图形
            myChart.dispatchAction({
                type: 'highlight',
                seriesIndex: 0,
                dataIndex: currentIndex
            });
        }, 1000);
        myChart.setOption(option);
		</script>
</html>
